<template xmlns:box-shadow="http://www.w3.org/1999/xhtml">
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch">
      <el-form-item label="检查项目" prop="examId">
        <el-button-group>
          <el-button
            v-for="exam in checkName"
            :key="exam.examId"
            :label="exam.examName"
            :value="exam.examId" type="primary" @click="changeExamId(exam.examName)"  style="width: 100px"  plain>{{exam.examName}}
          </el-button>
        </el-button-group>
      </el-form-item>
    </el-form>
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch">
      <el-form-item label="检查单号" prop="examName">
        <el-input
          v-model="queryParams.checkCode"
          placeholder="请输入检查单号"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
      </el-form-item>
    </el-form>
    <hr/>
    <el-table v-loading="loading" :data="checkList" border>
      <el-table-column label="检查单号" align="center" key="checkCode" prop="checkCode" width="250" />
      <el-table-column label="项目名称" align="center" key="examName" prop="examName" :show-overflow-tooltip="true" width="250"/>
      <el-table-column label="患者姓名" align="center" key="patiName" prop="patiName"  :show-overflow-tooltip="true" width="250"/>
      <el-table-column label="检查状态" align="center" :show-overflow-tooltip="true">
        <span>检测中</span>
      </el-table-column>
      <el-table-column label="检查结果" align="center" key="checkResult" prop="checkResult"  width="250" />
      <el-table-column label="创建时间" align="center" prop="createTime" width="250">

      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        width="160"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['examine:luru:edit']"
          >录入结果</el-button>
        </template>
      </el-table-column>
    </el-table>



    <!-- 添加或修改岗位对话框 -->
    <el-dialog :title="title" align="center" :visible.sync="open" width="500px" append-to-body>
      <el-table-column type="selection" width="55" align="center" />
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="检查结果" prop="checkResult">
          <el-input v-model="form.checkResult" placeholder="请输入检测结果" />
        </el-form-item>
        <el-form-item  prop="checkCode"></el-form-item>
        <el-form-item  prop="filename"></el-form-item>
        <el-form-item  prop="filesite"></el-form-item>
        <el-upload
         class="upload-demo"
         :headers="upload.headers"
         :action="upload.url"
         :on-success="xxxx">
         <el-button size="small" type="primary">选择检查结果图片</el-button>
         <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
       </el-upload>
        <!--<br>
        <el-upload
          class="upload-demo"
          :headers="upload.headers"
          :action="upload.url"
          :on-success="uploaded"
        >
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>-->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { listMenu, getCheck2,ChangeCheckStatus2, addMenu, updateMenu,checkNamelist } from "@/api/examine/check";
  import Treeselect from "@riophae/vue-treeselect";
  import { getToken } from "@/utils/auth";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  import IconSelect from "@/components/IconSelect";
  import { getPost } from '../../../api/system/post'

  export default {
    name: "index",

    data() {
      return {
        /*fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'},
          {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}],
        */postId: undefined,
        // 遮罩层
        userList: null,
        loading: true,
        // 显示搜索条件
        showSearch: true,
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 显示状态数据字典
        visibleOptions: [],
        // 菜单状态数据字典
        statusOptions: [],
        //检查项目
        checkName:[],
        // 查询参数
        checkList:[],
        queryParams: {
          //选定检查项目ID
          examName: undefined,
          checkCode:undefined
        },

        /*
        上传配置,默认上传的文件的请求参数名是file。
        定义on-success函数，控制器返回AjaxResult.data就是上传的文件保存在服务器硬盘中的地址和文件名。
        把response.data保存到form表单中。
        form.图片地址=response.data
         */
        upload: {
          // 设置上传的请求头部
          headers: { Authorization: "Bearer " + getToken() },
          // 上传的地址
          url: process.env.VUE_APP_BASE_API + "/examine/newCheck/upload"
        },
       /* // 上传检查结果
        upload: {
          // 设置上传的请求头部
          headers: { Authorization: "Bearer " + getToken() },
          // 上传的地址
          url: process.env.VUE_APP_BASE_API + "/check/upload"
        },*/
        // 表单重置
        reset() {
          this.form = {
            checkCode: undefined,
            checkResult: undefined,
            filename: undefined,
            filesite: undefined,
          };
          this.resetForm("form");
        },
        // 表单参数
        form: {

        },

      };
    },
    created() {
      this.getCheckName();


      /*this.getDicts("sys_show_hide").then(response => {
        this.visibleOptions = response.data;
      });
      this.getDicts("sys_normal_disable").then(response => {
        this.statusOptions = response.data;
      });*/
    },
    methods: {
      xxxx(response, file, fileList){

        this.form.filename=response.data.filename
        this.form.filesite=response.data.filesite
        console.log(response.data)
      },

      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      /*/!** 提交按钮 *!/
      submitForm: function() {
        this.$refs["form"].validate(valid => {
          alert(this.$refs["form"])
          ChangeCheckStatus2(this.form).then(response => {
            console.log(response+"wwwww");

            this.msgSuccess("开始检测成功");
            this.getList();
            this.open = false;
            this.reset();

          });
        });
      },*/
      /** 提交按钮 */
      submitForm: function(row) {
        console.log(this.form)
        ChangeCheckStatus2(this.form).then(response => {
          this.handleQuery()
          console.log(response.code)
          this.msgSuccess("录入成功");
          this.open = false;
        });
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset();
        this.open = true;
        this.title = "录入【"+row.patiName+"】的检查结果";
        this.form.checkCode=row.checkCode
      },

      //修改状态前的查询
      getList() {
        getCheck2(this.queryParams).then(response => {
          this.checkList = response.data
          console.log(response)
        });
      },

      /** 查询检查项目名称*/
      getCheckName(){
        this.loading = true;
        checkNamelist().then(response=>{
          this.checkName=response.data;
          this.loading=false;
        })
      },
      changeExamId(examName){
        this.queryParams.examName = examName;
        console.log(this.queryParams.examName)
      },
      /** 查询菜单下拉树结构 */
      getTreeselect() {
        listMenu().then(response => {
          this.menuOptions = [];
          const menu = { menuId: 0, menuName: '主类目', children: [] };
          menu.children = this.handleTree(response.data, "menuId");
          this.menuOptions.push(menu);
        });
      },
      // 显示状态字典翻译
      visibleFormat(row, column) {
        if (row.menuType == "F") {
          return "";
        }
        return this.selectDictLabel(this.visibleOptions, row.visible);
      },
      // 菜单状态字典翻译
      statusFormat(row, column) {
        if (row.menuType == "F") {
          return "";
        }
        return this.selectDictLabel(this.statusOptions, row.status);
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          menuId: undefined,
          parentId: 0,
          menuName: undefined,
          icon: undefined,
          menuType: "M",
          orderNum: undefined,
          isFrame: "1",
          isCache: "0",
          visible: "0",
          status: "0"
        };
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.getList();
      },
      handlechange(){

      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },

    }
  };
</script>
